<template>
    <div style="display: flex;flex-direction: row;align-items: center">
        <div class="wrapper" ref="wrapper">
            <dl class="tab-bar">
                <dt v-for="(item,index) in barItem" v-bind:key="item.id">
                    <div v-if="item.check">
                        <div class="button-style">
                            <div @click="first(item.id)" class="button-child-style">
                                <img class="user-img" :src="item.img"
                                     onerror="this.src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTBTAzefGHk0uZUW8e5MPCRGfw9kVQPHA6Ih6EM50TASzgttLu4fWY_SbcZ3DUV6RK2iY&usqp=CAU'"/>
                                <div v-if="item.unReadMsgNum>0">
                                    <Badge dot>
                                        <button class="text-style"> {{ item.number }}</button>
                                    </Badge>
                                </div>
                                <div v-else>
                                    <button class="text-style"> {{ item.number }}</button>
                                </div>
                            </div>
                            <div v-if="barItem.length>1">
                                <Icon type="md-close" size="14" class="button-del" @click="del(item.id,index)"/>
                            </div>

                        </div>
                    </div>
                    <div v-else>
                        <div class="button-unselect-style">
                            <div @click="first(item.id)" class="button-child-style">
                                <img class="user-img" :src="item.img"/>
                                <button class="text-style"> {{ item.number }}</button>
                            </div>
                            <Icon type="md-close" size="14" class="button-del" @click="del(item.id,index)"/>
                        </div>
                    </div>
                </dt>
                <!--      <dt> <Icon type="md-person" size="30" /></dt>-->
                <dt v-if="barItem.length < 6">
                    <button class="button-add" @click="add()">+</button>
                </dt>
            </dl>
        </div>
        <div>
            <span class="current-table-class">{{$t('lang.topCurrentTable')}}{{currentTable}}</span>
        </div>
    </div>
</template>
<script>

    const {ipcRenderer} = window.require("electron");
    import BScroll from "better-scroll";

    export default {
        data() {
            return {
                barItem: [],
                additionalWindowsSize: 3,
                currentAccountList: [],
                currentTable: localStorage.name,
                currentViewId: 3
            };
        },
        mounted() {
            ipcRenderer.on('windowClose', (() => {
                this.langValue = localStorage.langValue
                localStorage.clear()
                localStorage.langValue = this.langValue
            }))

            ipcRenderer.on('commonNotify', (event, arg) => {
                for (let i = 0; i < this.barItem.length; i++) {
                    if (this.barItem[i].id === arg.viewId) {
                        if (this.barItem[i].unReadMsgNum !== arg.unReadMsg) {
                            this.barItem[i].unReadMsgNum = arg.unReadMsg;
                            this.$set(this.barItem, i, this.barItem[i])
                        }
                    }
                }
            })

            ipcRenderer.on('loginSuccess', (event, arg) => {
                let position
                for (let i = 0; i < this.barItem.length; i++) {
                    if (this.barItem[i].id === arg.viewId) {
                        position = i
                    }
                }
                this.$set(this.barItem, position, {
                    id: arg.viewId,
                    number: arg.pushname,
                    check: true,
                    img: (typeof arg.avatar === "undefined" || arg.avatar === null) ? "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTBTAzefGHk0uZUW8e5MPCRGfw9kVQPHA6Ih6EM50TASzgttLu4fWY_SbcZ3DUV6RK2iY&usqp=CAU" : arg.avatar
                })
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth() + 1;
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
                let getTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
                this.getSaveWaAccount(getTime, arg.pushname, arg.wid)
                this.currentAccountList.push({
                    account: arg.pushname,
                    viewId: arg.viewId,
                    contacts: arg.contacts,
                    wid:arg.wid
                })
                localStorage.currentAccountList = JSON.stringify(this.currentAccountList)
                this.getGroupSave(arg.group)
            })

            ipcRenderer.on('selectNewChat', (event, arg) => {
                // let index
                // for (let i = 0; i < this.barItem.length; i++) {
                //     if (this.barItem[i].id === arg.viewId) {
                //         index = i
                //     }
                // }
                this.first(arg.viewId)
            })
            ipcRenderer.on('add-user', (event, arg) => {
                this.barItem.push({
                    id: arg,
                    number: this.$t('lang.topNotLoginTip'),
                    check: true,
                    img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTBTAzefGHk0uZUW8e5MPCRGfw9kVQPHA6Ih6EM50TASzgttLu4fWY_SbcZ3DUV6RK2iY&usqp=CAU"
                })
                this.currentViewId = arg

            })
            ipcRenderer.on('LogoutRequest', (event, arg) => {
                let index
                for (let i = 0; i < this.barItem.length; i++) {
                    if (this.barItem[i].id === arg) {
                        index = i
                    }
                }
                this.$set(this.barItem, index, {
                    id: arg,
                    number: this.$t('lang.topNotLoginTip'),
                    check: true,
                    img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTBTAzefGHk0uZUW8e5MPCRGfw9kVQPHA6Ih6EM50TASzgttLu4fWY_SbcZ3DUV6RK2iY&usqp=CAU"
                })
                for (let i = 0; i < this.currentAccountList.length; i++) {
                    if (arg === this.currentAccountList[i].viewId) {
                        this.currentAccountList.splice(i, 1)
                    }
                }
                localStorage.currentAccountList = JSON.stringify(this.currentAccountList)
            })

            this.$nextTick(() => {
                this.scroll = new BScroll(this.$refs.wrapper, {});
            });
        },
        created() {
            this.$i18n.locale = localStorage.langValue
            this.barItem = [
                {
                    id: 3,
                    number: this.$t('lang.topNotLoginTip'),
                    check: true,
                    img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTBTAzefGHk0uZUW8e5MPCRGfw9kVQPHA6Ih6EM50TASzgttLu4fWY_SbcZ3DUV6RK2iY&usqp=CAU",
                    unReadMsgNum: 0
                }
            ]
            // this.$nextTick(() => {
            //     this.personScroll();
            // });
        },
        methods: {
            personScroll() {
                // 默认有六个li子元素，每个子元素的宽度为120px
                let width = 6 * 150;
                this.$refs.personTab.style.width = width + "px";
                // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
                this.$nextTick(() => {
                    if (!this.scroll) {
                        this.scroll = new BScroll(this.$refs.personWrap, {
                            startX: 0,
                            click: true,
                            scrollX: true,
                            // 忽略竖直方向的滚动
                            scrollY: false,
                            listenScroll: true,
                            eventPassthrough: "horizontal",
                        });
                    } else {
                        this.scroll.refresh();
                    }
                });
            },
            first(id) {
                if (this.currentViewId !== id) {
                    ipcRenderer.send("asynchronous-message", id);
                    for (let i = 0; i < this.barItem.length; i++) {
                        if (this.barItem[i].id === id) {
                            this.barItem[i].check = true
                            this.currentViewId = this.barItem[i].id
                        } else {
                            this.barItem[i].check = false
                        }
                    }
                }
            },
            add() {
                for (let i = 0; i < this.barItem.length; i++) {
                    this.barItem[i].check = false
                }
                ipcRenderer.send("add-user", this.barItem[this.barItem.length - 1].id + 1);
            },
            del: function (id, index) {//index为要删除的索引
                if (this.barItem.length > 1) {
                    let position//目前选择的tab
                    for (let i = 0; i < this.barItem.length; i++) {
                        this.barItem[i].check = false
                        if (this.barItem[i].id === this.currentViewId) {
                            position = i
                        }
                    }
                    if (this.currentViewId === id) {
                        if (position === this.barItem.length - 1) {
                            this.barItem[index - 1].check = true
                            this.currentViewId = this.barItem[index - 1].id

                        } else {
                            this.barItem[index + 1].check = true
                            this.currentViewId = this.barItem[index + 1].id
                        }
                    } else {
                        this.barItem[position].check = true
                        this.currentViewId = this.barItem[position].id
                    }
                    ipcRenderer.send("remove-user", id);
                    this.barItem.splice(index, 1)
                    for (let i = 0; i < this.currentAccountList.length; i++) {
                        if (id === this.currentAccountList[i].viewId) {
                            this.currentAccountList.splice(i, 1)
                        }
                    }
                    localStorage.currentAccountList = JSON.stringify(this.currentAccountList)


                }
            },
            getSaveWaAccount(time, name, account) {
                this.$api.getSaveWaAccount({
                    adminCode: localStorage.adminCode,
                    loginTime: time,
                    nickname: name,
                    seatWaAccount: account
                }).then(() => {

                })
            },
            getGroupSave(groupList) {
                this.$api.getGroupSave({
                    list: groupList
                }).then(() => {
                })
            }
        },
    }
</script>
<style>
    .current-table-class {
        color: #333333;
        position: absolute;
        right: 20px;
    }

    .tab-bar {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-right: 100px;

    }

    .user-img {
        width: 30px;
        height: 30px;
        border-radius: 20px;
        margin-left: 15px;
    }

    .text-style {
        color: #333333;
        margin-left: 10px;
        border: none;
        outline: none;
        background-color: transparent;
        margin-right: 20px;
        width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

    }

    .button-child-style {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
    }

    .button-style {
        width: 190px;
        height: 39px;
        background-color: white;
        border: none;
        outline: none;
        display: flex;
        margin-top: 8px;
        justify-content: space-between;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-left: 5px;
        align-items: center;
        margin-bottom: 1px;
    }

    .button-child-style {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .button-style {
        width: 190px;
        height: 39px;
        background-color: white;
        border: none;
        outline: none;
        display: flex;
        margin-top: 8px;
        justify-content: space-between;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-left: 5px;
        align-items: center;
        margin-bottom: 1px;
    }

    .button-unselect-style {
        width: 190px;
        height: 39px;
        background-color: #f4f4f4;
        border: none;
        outline: none;
        display: flex;
        margin-top: 8px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-left: 5px;
        align-items: center;
        margin-bottom: 1px;
        justify-content: space-between;

    }


    .button-del {
        margin-right: 15px;
    }

    .button-add {
        width: 40px;
        color: #666666;
        font-size: 25px;
        font-weight: 500;
        align-items: center;
        border: none;
        outline: none;
        background-color: #f4f4f4;
        margin-left: 10px;
        margin-top: 10px;
    }

    .button-add:active {
        background-color: #e6e6e6;
    }

    .demo-badge-alone {
        background: #5cb85c !important;
    }

</style>